<script>
// import UploadFile from '@/components/ElmentUI/components/el-new-UploadFile1.0.vue'
// <UploadFile ref="UploadFileRef" :parameter="UploadFileParameter"></UploadFile>
export default {
  props: {
    parameter: {
      type: Object,
      required: true,
      default: {
        //模板下载地址
        template:{
          url: process.env.VUE_APP_BASE_API + "/book/importJh",
          downName: "模板.xls",
        },
        // 上传的地址
        uploadUrl: process.env.VUE_APP_BASE_API + "/book/importJh",
        disabled: false,
        // 上传的文件类型
        accept: '.xlsx, .xls',
        // 设置上传的请求头部
        headers: {
          token: '',
        },
        //是否多选
        multiple: true,
        handleFileSuccess: (response, file, fileList)=>{},
        handleFileUploadProgress: (event, file, fileList)=>{},
        open:()=>{
          this.$refs.UploadFileRef.show = true
        }
      },
    },
  },
  data(){
    return {
      show: false
    }
  },
  methods:{
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles();
      this.$alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
          "导入结果",
          { dangerouslyUseHTMLString: true }
      );
      this.parameter.handleFileSuccess && this.parameter.handleFileSuccess(response, file, fileList)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.parameter.disabled = true;
      console.log('导入中,禁用组件:',this.parameter.disabled);
      this.parameter.handleFileUploadProgress && this.parameter.handleFileUploadProgress(event, file, fileList)
    },
    // 模板下载
    downloadTemplate() {
      let a = document.createElement("a");
      a.href = this.parameter.template.url
      a.download = this.parameter.template.downName
      a.click();
      a.remove();
    },
  }
}
</script>

<template>
  <div>
    <el-dialog
        center
        title="请先下载模板"
        :visible.sync="show"
        width="450px"
    >
      <el-button @click="downloadTemplate" style="margin: 0 0 5% 5%">Excel模板下载</el-button>
      <el-upload
          ref="upload"
          class="upload-demo"
          :accept="parameter.accept"
          drag
          :headers="parameter.headers"
          :action="parameter.uploadUrl"
          :disabled="parameter.disabled"
          :multiple="parameter.multiple"
          :on-success="handleFileSuccess"
          :on-progress="handleFileUploadProgress"
          style="margin-left: 5%"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
